<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>muugyjUI-ActionSheet弹出式菜单</title>
  <link rel="stylesheet" href="../src/muugyj-ui.css">
</head>
<body>
  <div class="gy-content">
    <h1 class="gy-panel-title">ActionSheet弹出式菜单</h1>
    <div class="gy-panel-body">
        <a class="gy-btn" id="js-show">显示弹出式菜单</a>
    </div>
  </div>
  <div class="gy-action-sheet">
    <div class="gy-mask"></div>
    <div class="gy-action-sheet-wrap">
      <div class="gy-action-sheet-header">
        <h1 class="gy-action-sheet-title">你需要什么操作？</h1>
      </div>
      <div class="gy-action-sheet-body">
        <a class="gy-action-sheet-menu">收藏</a>
        <a class="gy-action-sheet-menu">关注</a>
        <a class="gy-action-sheet-menu">分享给好友</a>
      </div>
      <div class="gy-action-sheet-footer">
        <a class="gy-action-sheet-menu" id="js-close">取消</a>
      </div>
    </div>
  </div>
  <script>
    window.onload = ()=>{
        // 弹出菜单
        document.querySelector('#js-show').onclick = (e) => {
            document.querySelector('.gy-action-sheet').classList.add('show');
        }
        // 收回菜单
        document.querySelector('#js-close').onclick = (e) => {
            document.querySelector('.gy-action-sheet').classList.remove('show');
        }
    };
  </script>
</body>
</html>